<template>
  <Modal :value.sync="dialogAreaSelectedVisible"
          :width="dialogWidth ? dialogWidth : 'auto'"
          :title="dialogTitle ? dialogTitle : '选择区域'"
          @on-ok="handleAreaOk"
          @on-cancel="handleAreaCancle">
    <Tree ref="cityTree"
        :data="treeAreaData"
        show-checkbox
        multiple />
  </Modal>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    dialogTitle: {
      type: String
    },
    dialogWidth: {
      type: Number
    },
  },
  data () {
    return {
      dialogAreaSelectedVisible: false,
    }
  },
  computed: {
    ...mapState('commonComps/areaSelected', [
      'treeAreaData'
    ])
  },
  watch: {
    /* 监听是否显示模态框的父组件传值 */
    visible (newValue) {
      this.dialogAreaSelectedVisible = newValue
    },
  },
  destroyed () {
    /* 组件销毁时重置vuex state的数据 */
    this.RESET_AREA_DATA()
  },
  methods: {
    ...mapMutations('commonComps/areaSelected', [
      'SET_SELECTED_AREA_LIST', 'CHANGE_AREA_CHECKED', 'RESET_AREA_DATA'
    ]),
    handleAreaOk () {
      let checkedNodesList = this.$refs.cityTree.getCheckedNodes();
      this.SET_SELECTED_AREA_LIST(checkedNodesList)
      if (this.saveRelateArea) { this.saveRelateArea() }
      this.dialogAreaSelectedVisible = false
      this.$emit('update:visible', false)
    },
    handleAreaCancle () {
      this.dialogAreaSelectedVisible = false
      this.$emit('update:visible', false)
    },
  }
}
</script>
